<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:ry="">
	<head>
		<th:block th:include="include :: header('修改菜单')" />
		<style type="text/css">
		th {
			text-align: center;
		}
		.tab-pane {
			padding: 10px;
			margin-top: 0px;
			margin-left: 1px;
			background-color: #FFFFFF;
		    border-radius: 0px 0px 6px 6px;
			box-shadow: rgba(0, 0, 0, 0.2) 1px 1px 3px;
		}
        #permit_list td {
            position: relative;
        }
        #permit_list label.error {
            position: absolute;
            right: 12px;
            top: 17px;
            color: #ef392b;
            font-size: 12px;
        }
        .table-header th.is-required:before {
            content: '* ';
            color: red;
        }
		</style>
	</head>
	<body class="gray-bg">
		<div class="tabs-container">
			<form class="form-horizontal m" id="form-menu-edit">
				<ul class="nav nav-tabs">
                    <li class="active"><a href="#tab-basic" data-toggle="tab" aria-expanded="false">菜单信息</a></li>
                    <li><a href="#tab-permit" data-toggle="tab" aria-expanded="true">权限配置</a></li>
                </ul>

				<div class="tab-content">
					<div id="tab-basic" class="tab-pane active">
						<div class="form-group">
							<label class="col-sm-3 control-label is-required">上级菜单：</label>
							<div class="col-sm-8">
							    <div class="input-group">
									<input class="form-control" type="text" onclick="selectMenuTree()" id="treeName" readonly="true" th:value="${menu.parentName == null ? '主目录' : menu.parentName}">
								    <span class="input-group-addon"><i class="fa fa-search"></i></span>
									<input type="hidden" id="treeId" name="parent_id" th:value="${menu.parentId == null ? '0' : menu.parentId}"/>
									<input type="hidden" id="menu_id" name="menu_id" th:value="${menu.menuId}" />
							    </div>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label is-required">菜单类型：</label>
							<div class="col-sm-8">
								<ry:radioDict dictType="sys_menu_type" name="menu_type" class="radio-box" required="true" th:value="${menu.menuType}"/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label is-required">菜单名称：</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" name="menu_name" id="menu_name" th:value="${menu.menuName}" required/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">请求地址：</label>
							<div class="col-sm-8">
								<input id="url" name="url" class="form-control" type="text" th:value="${menu.url}"/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">打开方式：</label>
							<div class="col-sm-8">
								<select id="target" name="target" class="form-control m-b">
				                    <option value="menuItem" th:selected="${menu.target == 'menuItem'}">页签</option>
				                    <option value="menuBlank" th:selected="${menu.target == 'menuBlank'}">新窗口</option>
				                </select>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label">权限标识：</label>
							<div class="col-sm-8">
								<input id="perms" name="perms" class="form-control" type="text" th:value="${menu.perms}"/>
							    <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 控制器中定义的权限标识，如：@RequiresPermissions("")</span>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label is-required">显示排序：</label>
							<div class="col-sm-8">
								<input class="form-control" type="text" name="order_num" th:value="${menu.orderNum}" required/>
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label is-required">图标：</label>
							<div class="col-sm-8">
								<input id="icon" name="icon" class="form-control" type="text" placeholder="选择图标" th:value="${menu.icon}" required/>
			                    <div class="ms-parent" style="width: 100%;">
			                        <div class="icon-drop animated flipInX" style="display: none;max-height:200px;overflow-y:auto">
			                            <div data-th-include="system/menu/icon"></div>
			                        </div>
			                    </div>
							</div>
						</div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label is-required">菜单状态：</label>
                            <div class="col-sm-8">
                                <ry:radioDict dictType="sys_show_hide" name="visible" class="radio-box" required="true" th:value="${menu.visible}"/>
                            </div>
                        </div>
                        <div class="form-group is-refresh">
                            <label class="col-sm-3 control-label is-required" title="打开菜单选项卡是否刷新页面"><i class="fa fa-question-circle-o"></i>是否刷新：</label>
                            <div class="col-sm-8">
                                <ry:radioDict dictType="common_status" name="is_refresh" class="radio-box" required="true" th:value="${menu.isRefresh}"/>
                            </div>
                        </div>
					</div>

					<div id="tab-permit" class="tab-pane table-striped">
						<div class="btn-group-sm" id="toolbar" role="group" style="margin-bottom: 10px;">
				            <a class="btn btn-success" onclick="insertRow()">
				                <i class="fa fa-plus"></i> 新增行
				            </a>
				        </div>
						<table class="table table-hover">
							<thead>
                                <tr class="table-header">
                                    <th class="is-required">权限名称</th>
                                    <th class="is-required">权限标识</th>
                                    <th class="is-required" style="width: 70px;">排序</th>
                                    <th style="width: 70px;">操作</th>
                                </tr>
							</thead>
							<tbody id="permit_list">
								<tr th:if="${#lists.isEmpty(permitList)}">
									<td align="center">
                                        <input type="hidden" name="row_num" value="1"/>
										<input type="hidden" name="permit_id" value=""/>
										<input class="form-control" type="text" id="permit_name1" name="permit_name" style="width: 99%;"/>
									</td>
									<td align="center">
										<input class="form-control" type="text" id="permit_perms1" name="permit_perms" style="width: 99%;"/>
									</td>
									<td align="center">
										<input class="form-control" type="text" id="permit_order1" name="permit_order" style="width: 99%;"/>
									</td>
									<td align="center">
										<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="removeRow(this)"><i class="fa fa-remove"></i>删除</a>
									</td>
								</tr>
								<tr th:each="permit,permit_stat : ${permitList}">
									<td align="center">
                                        <input type="hidden" name="row_num" th:value="${permit_stat.count}"/>
										<input type="hidden" name="permit_id" th:value="${permit.menuId}" />
										<input class="form-control" type="text" th:id="permit_name+${permit_stat.count}" name="permit_name" style="width: 99%;" th:value="${permit.menuName}"/>
									</td>
									<td align="center">
										<input class="form-control" type="text" th:id="permit_perms+${permit_stat.count}" name="permit_perms" style="width: 99%;" th:value="${permit.perms}"/>
									</td>
									<td align="center">
										<input class="form-control" type="text" th:id="permit_order+${permit_stat.count}" name="permit_order" style="width: 99%;" th:value="${permit.orderNum}"/>
									</td>
									<td align="center">
										<a class="btn btn-danger btn-xs " href="javascript:void(0)" onclick="removeRow(this)"><i class="fa fa-remove"></i>删除</a>
									</td>
								</tr>
							</tbody>
						</table>
					</div>
				</div>
			</form>
		</div>
		<th:block th:include="include :: footer" />
        <script>
            $(function () {
                if ($.validator) {
                    $.validator.prototype.elements = function () {
                        var validator = this,
                            rulesCache = {};
                        return $(this.currentForm)
                            .find("input, select, textarea")
                            .not(":submit, :reset, :image, [disabled]")
                            .not(this.settings.ignore)
                            .filter(function () {
                                if (!this.name && validator.settings.debug && window.console) {
                                    console.error("%o has no name assigned", this);
                                }
                                rulesCache[this.name] = true;
                                return true;
                            });
                    }
                }
            });
	        var prefix = ctx + "system/menu";

	        $(function() {
	        	$("input[name='menu_type'][value='F']").parents(".radio-box").hide();
	            var menu_type = $('input[name="menu_type"]:checked').val();
	            menuVisible(menu_type);
	        });

	        $("#form-menu-edit").validate({
                ignore: "",
	        	onkeyup: false,
	        	rules:{
	        		menu_type:{
	        			required:true,
	        		},
	        		menu_name:{
	        			remote: {
	                        url: prefix + "/checkMenuNameUnique",
	                        type: "post",
	                        dataType: "json",
	                        data: {
	                        	"menu_id": function() {
	                                return $("#menu_id").val();
	                            },
	                            "parent_id": function() {
			                		return $("input[name='parent_id']").val();
			                    },
	                			"menu_name": function() {
	                                return $.common.trim($("#menu_name").val());
	                            }
	                        },
	                        dataFilter: function(data, type) {
	                        	return $.validate.unique(data);
	                        }
	                    }
	        		},
	        		order_num:{
	        			digits:true
	        		},
	        	},
	        	messages: {
	                "menu_name": {
	                    remote: "菜单已经存在"
	                }
	            },
	            focusCleanup: true
	        });

	        function submitHandler() {
		        if ($.validate.form()) {
		            $.operate.save(prefix + "/edit", $('#form-menu-edit').serialize());
		        }
		    }

	        $(function() {
	            $("input[name='icon']").focus(function() {
	                $(".icon-drop").show();
	            });
	            $("#form-menu-edit").click(function(event) {
	                var obj = event.srcElement || event.target;
	                if (!$(obj).is("input[name='icon']")) {
	                    $(".icon-drop").hide();
	                }
	            });
	            $(".icon-drop").find(".ico-list i").on("click",
	            function() {
	                $('#icon').val($(this).attr('class'));
	            });
	            $('input').on('ifChecked',
	            function(event) {
	                var menu_type = $(event.target).val();
	                menuVisible(menu_type);
	            });
	        });

	        function menuVisible(menu_type) {
	            if (menu_type == "M") {
	                $("#url").parents(".form-group").hide();
	                $("#perms").parents(".form-group").hide();
	                $("#icon").parents(".form-group").show();
	                $("#target").parents(".form-group").hide();
                    //去掉配置权限校验
                    $("input[name='permit_name']").each(function () {
                        $.validate.removeRule($(this));
                    });
                    $("input[name='permit_perms']").each(function () {
                        $.validate.removeRule($(this));
                    });
                    $("input[name='permit_order']").each(function () {
                        $.validate.removeRule($(this));
                    });
                    $("#permit_list").find("label.error").remove();
                    $("#tab-permit").find("th").slice(0, 3).removeClass("is-required");

	                $("input[name='visible']").parents(".form-group").show();
                    $(".is-refresh").hide();
	            } else if (menu_type == "C") {
	                $("#url").parents(".form-group").show();
	                $("#perms").parents(".form-group").show();
	                $("#icon").parents(".form-group").show();
	                $("#target").parents(".form-group").show();
	                $("input[name='visible']").parents(".form-group").show();
                    $("input[name='permit_name']").each(function () {
                        $.validate.addRequiredRule($(this));
                    });
                    $("input[name='permit_perms']").each(function () {
                        $.validate.addRequiredRule($(this));
                    });
                    $("input[name='permit_order']").each(function () {
                        $.validate.addRequiredRule($(this));
                    });
                    $("#tab-permit").find("th").slice(0, 3).addClass("is-required");
                    $(".is-refresh").show();
	            } else if (menu_type == "F") {
	                $("#url").parents(".form-group").hide();
	                $("#perms").parents(".form-group").show();
	                $("#icon").parents(".form-group").hide();
	                $("#target").parents(".form-group").hide();
	                $("input[name='visible']").parents(".form-group").hide();
                    $(".is-refresh").hide();
	            }
	        }

	        /*菜单管理-修改-选择菜单树*/
	        function selectMenuTree() {
	        	var menuId = $("#treeId").val();
	        	if(menuId > 0) {
	        		var options = {
	       				title: '菜单选择',
						url: prefix + "/selectMenuTree/" + menuId,
	       				width: "380",
	       				callBack: doSubmit
	       			};
	       			$.modal.openOptions(options);
	        	} else {
	        		$.modal.alertError("主菜单不能选择");
	        	}
			}

			/*删除行*/
			function removeRow(src) {
                var length = $("#permit_list").find("input[name='row_num']").length;
		        if(length == 1) {
	        		$.modal.alertWarning('请至少保留一行数据！');
	        		return;
	        	}
	        	$(src).parent().parent().remove();
			}

			/*新增行 */
	        function insertRow(){
                var rowNum = $.common.maxInt($("input[name='row_num']").toArray()) + 1 ;
                var newTr = $("#permit_list").find("tr").eq(0).clone(true);
                newTr.find("input").val("").removeClass("error");
                newTr.find("input").each(function () {
                    $(this).attr("id", $(this).attr("name")+rowNum);
                });
                newTr.find("input[name='row_num']").val(rowNum);
                newTr.find("label.error").remove();
                newTr.appendTo("#permit_list");
	        }

			function doSubmit(index, layero){
				var body = layer.getChildFrame('body', index);
	   			$("#treeId").val(body.find('#treeId').val());
	   			$("#treeName").val(body.find('#treeName').val());
	   			layer.close(index);
			}
	    </script>
	</body>
</html>